<script setup lang="ts">
import * as THREE from "three";
import { TextureLoader } from "three";
import { TresObject, useGraph, useLoader } from "@tresjs/core";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
import { computed, shallowRef, watch } from "vue";
import { useAnimations, GLTFModel } from "@tresjs/cientos";
import { BoxGeometry, Group, Mesh, MeshStandardMaterial } from "three";

// Create a group and add a mesh with a named material
const { state: texture } = await useLoader(TextureLoader, "./ui/content2.png");
const group = new Group();
const box = new Mesh(
  new BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({
    name: "M_QiFuQian_1",
    // color: "red",
    blending: 1,
    map: texture.value,
    lightMapIntensity: 2,
    side: 2,
  })
);
box.name = "Box";
group.add(box);
console.log("group:", group);

// Use useGraph to extract nodes and materials
const graph = useGraph(group);
console.log("graph:", graph.value);
// Change the position of the box by name
graph.value.nodes.Box.position.set(0, 0, 0);

const boxRef = shallowRef<TresObject | null>(null);
watch(
  boxRef,
  () => {
    console.log("boxRef:", boxRef?.value);
    if (boxRef.value) {
      const graph = useGraph(boxRef.value?.scene as any);
      console.log("graph:", graph.value);
    }
  },
  { immediate: true, deep: true }
);
</script>

<template>
  <TresPerspectiveCamera :position="[0, 12, 0]" :look-at="[0, 0, 0]" />
  <!-- <TresAmbientLight :position="[0, 0, 0]" :intensity="3" color="#ffffff" /> -->
  <!-- <TresDirectionalLight :position="[-0.5, 20, -1]" :intensity="1" /> -->
  <!-- Render the Cube node if it exists -->
  <TresMesh>
    <!-- <primitive v-if="Scene" :object="Scene" /> -->

    <!-- <GLTFModel ref="boxRef" path="./model/SK_FuQian_A1.glb" :map="texture">
    </GLTFModel> -->
  </TresMesh>

  <!-- <TresMesh :position="[0, 3, 2]" :scale="[2, 2, 2]">
    <TresBoxGeometry />
    <TresMeshBasicMaterial v-if="texture" :map="texture" />
  </TresMesh> -->

  <primitive v-if="graph.nodes.Box" :object="graph.nodes.Box" />
  <TresAxesHelper />
  <TresGridHelper :args="[10, 10]" />
</template>
